<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="学生姓名">
      <el-input
        v-model="formInline.stuName"
        placeholder="输入学生姓名"
        clearable
      />
    </el-form-item>
    <el-form-item label="市场部">
      <el-select v-model="formInline.origin" placeholder="请选择" clearable>
        <el-option
          v-for="item in adressOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="学院">
      <el-select v-model="formInline.collegeId" placeholder="请选择" clearable>
        <el-option label="游戏学院" value="1" />
        <el-option label="网站工程学院" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="工作城市">
      <cityOptions v-model="formInline.workCity" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, defineEmits } from "vue";
import cityOptions from "./cityOptions";

const formInline = reactive({
  stuName: [],
  origin: "",
  collegeId: "",
  workCity: "",
});
const emit = defineEmits(["sendHeaderData"]);

// 市场部信息
const adressOptions = [
  {
    value: "招生办",
    label: "招生办",
  },
  {
    value: "中原市场部",
    label: "中原市场部",
  },
  {
    value: "春峰市场部",
    label: "春峰市场部",
  },
  {
    value: "苏皖市场部",
    label: "苏皖市场部",
  },
  {
    value: "陕豫市场部",
    label: "陕豫市场部",
  },
];

const onSubmit = () => {
  console.log(formInline);
  emit("sendHeaderData", formInline);
};
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
